<template>
  <div class="app-container oneSearchNoFooter">
    <div class="customContainer ">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <dj-store-select :category="131" :defaultStore="formInline.store_id" :needItem="true" @change="selectStoreChanged" />
        <el-form-item>
          <el-date-picker v-model="pickerDate" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels range-separator="-"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <dj-simple-table :columns="tableColumns" :data="list" :global="global" :loading="listLoading" />

    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box" v-if="list">
      <span class="pull-right mt10" style="font-size:14px;color:#606266">　
        <!-- 出库数量合计：{{returnNum}}&#x3000;&#x3000;&#x3000;　　 -->
        <span style="padding-left:20px">
          出库金额合计：{{returnMoney|keepTwoNum}}
        </span>
        &#x3000;&#x3000;</span>
    </div>
  </div>
</template>
<script>
import { getList } from '@/api/report/sundryOutput_form_new';
import { pickerOptionsF, pickerDateF, pickerDateDot, optionMaxTime, getDateString } from '@/utils';
import { DjStoreSelect } from '@/components/store';
import { DjSimpleTable } from '@/components/table';
export default {
  components: {
    'dj-simple-table': DjSimpleTable,
    'dj-store-select': DjStoreSelect
  },
  data() {
    return {
      global: { 
        store_id: '', 
        begin_time:'',
        end_time:'',
      },
      tableColumns: [
        {
          label: '序号',
          dtcol: 'index'
        },
        {
          label: '辅助用品出库金额',
          dtcol: 'assist_money',
          isnum: true,
          link: 'report/sundryOutput_detail'
        },
        {
          label: '办公领用出库金额',
          dtcol: 'work_money',
          isnum: true,
          link: 'report/sundryOutput_detail'
        },
        {
          label: '公关领用出库金额',
          dtcol: 'relation_money',
          isnum: true,
          link: 'report/sundryOutput_detail'
        },
        {
          label: '总部领用出库金额',
          dtcol: 'headquarters_money',
          isnum: true,
          link: 'report/sundryOutput_detail'
        },
        {
          label: '生日领用出库金额',
          dtcol: 'birthday_money',
          isnum: true,
          link: 'report/sundryOutput_detail'
        },
        {
          label: '报废出库金额',
          dtcol: 'scrap_money',
          isnum: true,
          link: 'report/sundryOutput_detail'
        }
      ],
      list: [],
      listLoading: false,
      formInline: {
        store_id: this.$store.getters.optionId,
        begin_time: '',
        end_time: '',
        look_del: '0'
      },
      pickerOptions: pickerOptionsF(-1),
      pickerDate: pickerDateDot(-1,-1),
      returnNum: 0,
      returnMoney: 0
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      vm.beforeComingIn();
    });
  },
  watch: {
    pickerDate: function() {
      this.global.begin_time = this.pickerDate[0];
      this.global.end_time = this.pickerDate[1];
    }
  },  
  methods: { 
    beforeComingIn() {
      this.global.begin_time =  this.pickerDate[0];
      this.global.end_time =  this.pickerDate[1];
      if (this.$route.query.routerflag) {
        let col = this.$route.query.col;
        // 本月第一天至昨天
        let fist_day = getDateString('this_month_first_day', this.$route.query.global.time);
        let date = new Date(this.$route.query.global.time);
        let now = new Date();
        let yesterday;
        if (date.getMonth() == now.getMonth()) {
          yesterday = getDateString('yesterday');
        } else {
          yesterday = getDateString('this_month_last_day', this.$route.query.global.time);
        }
        this.pickerDate = [fist_day, yesterday];
        this.formInline.store_id = this.$route.query.global.store_id;
        // this.searchClick();
      }
      // else {
      //   if (!this.list || this.list.length == 0) {
      //     this.searchClick();
      //   }
      // }

    },
    selectStoreChanged(obj, item) {
      for (let key in obj) this.formInline[key] = obj[key]; 
      this.global.store_id = obj.store_id;
      this.searchClick();
    },
    // 搜索
    searchClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
        this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
        this.fetchData();
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      getList(this.formInline)
        .then(response => {
            // console.log(11, response);
          this.returnNum = 0;

          let list = response.data;
          let listData = [];
          if (list.length > 0) {
            let listObj = {
              assist_money: 0, // 辅助用品出库金额
              work_money: 0, // 办公领用出库金额
              relation_money: 0, // 公关领用出库金额
              headquarters_money: 0, // 总部领用出库金额
              birthday_money: 0, // 生日领用出库金额
              scrap_money: 0 // 报废出库金额
            };
            // 1:报废出库,3:办公领用,4:公关领用,6:总部领用,7:辅助用品,12:生日领用
            this.list = [];
            for (let key in list) {
              if (list[key].purpose == '1') {
                listObj.scrap_money = list[key].out_money;
              } else if (list[key].purpose == '3') {
                listObj.work_money = list[key].out_money;
              } else if (list[key].purpose == '4') {
                listObj.relation_money = list[key].out_money;
              } else if (list[key].purpose == '6') {
                listObj.headquarters_money = list[key].out_money;
              } else if (list[key].purpose == '7') {
                listObj.assist_money = list[key].out_money;
              } else if (list[key].purpose == '12') {
                listObj.birthday_money = list[key].out_money;
              }
            }
            listData.push(listObj);
          } else {
            listData = [];
          }
          if (listData.length > 0) {
            this.returnMoney = 0;
            let valueArr = []
            for (let key in listData) { 
              // 将数组中所有可计算的值进行重新组成一个新的数组
              valueArr = Object.values(listData[key]) 
              listData[key].index = parseInt(key) + 1;
            }
            this.returnMoney = valueArr.reduce((x,y)=>{return parseFloat(x) + parseFloat(y)})
          }
          this.list = listData; 
          // console.log(23,this.list)
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    }
  }
};
</script>
<style scoped>
.cell a {
  color: #409eff;
}
</style>